.login-container{
    height: calc(100% - 50px);
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.login-dialog{
    width:400px;
    height:300px;
    background-color: rgb(190,190,190);
    border-radius: 20px;
}
.login-dialog h3 {
    padding:30px 0 40px;
    font-size:40px;
    text-align:center;
}
.login-dialog .row {
    height: 50px;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-dialog a {
    display: block;
    height:30px;
    width: 400px;
    text-align: center;
    line-height:30px;
    font-size:10px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}
#username, #password {
    width:200px;
    height:40px;
    border:none;
    border-radius:20px;
    text-indent:20px;
    font-size:20px;
    font-weight:700;
    background-color: rgb(221, 236, 174);
    outline:none;
}
.login-dialog .row span {
    display:block;
    width: 100px;
    font-weight:700;

}
#submit{
    width:300px;
    height:40px;
   font-size:20px;
   font-weight:700;
   background-color: rgb(0,150,0);
   color:#fff;
   border:none;
   border-radius:20px;
   /* 水波纹效果 */
   position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24rpx;
    overflow: hidden;
    text-align: center;
    
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: radial-gradient(circle, #ccc 10%, transparent 10.1%);
      transform: scale(10);
      opacity: 0;
      transition: all 0.45s;
      content: '';
    }

    &:active::after {
      transform: scale(0);
      opacity: 0.5;
      transition: 0s;
    }
}
#submit:active{
    background-color: rgb(200,200,200);
}
